<template>
    <div class="p-grid crud-demo">
        <div class="p-col-12">
            <!--面包屑-->
            <div style="padding-bottom: 0.95rem;">
                <Breadcrumb :home="home" :model="crumbs"/>
            </div>
        </div>

        <div class="p-col-12 p-md-6">
            <div class="card p-fluid">
                <h3> {{edit_title}}</h3>
                <h5>请求信息</h5>

                <div class="p-field" v-show="PidSelectedValue === null">
                    <label for="data.qid">请求唯一ID</label>
                    <InputText id="data.qid" v-model="data.qid" type="text"/>
                </div>

                <div class="p-field">
                    <label for="data.server_name">网站域名</label>
                    <InputText id="data.name" v-model="data.server_name" type="text"/>
                </div>
                <div class="p-field">
                    <label for="data.url">请求地址</label>
                    <InputText id="data.url" v-model="data.url" type="text"/>
                </div>

                <div class="p-field">
                    <label for="data.uri">请求路径</label>
                    <InputText id="data.uri" v-model="data.uri" type="text"/>
                </div>
                <div class="p-field">
                    <label for="data.method">请求方式</label>
                    <InputText id="data.method" v-model="data.method" type="text"/>
                </div>
                <div class="p-field">
                    <label for="data.arguments">请求参数</label>
                    <Textarea v-model="data.arguments" rows="5" cols="30" />
                </div>

                <div class="p-formgrid p-grid">
                    <div class="p-field p-col">
                        <label for="data.real_ip">访问IP</label>
                        <InputText id="data.real_ip" v-model="data.real_ip" type="text"/>
                    </div>
                    <div class="p-field p-col">
                        <label for="data.city_id">访问IP地区标识</label>
                        <InputText id="data.city_id" v-model="data.city_id" type="text"/>
                    </div>
                </div>

                <div class="p-formgrid p-grid">
                    <div class="p-field p-col">
                        <label for="data.platform">操作系统</label>
                        <InputText id="data.real_ip" v-model="data.platform" type="text"/>
                    </div>
                    <div class="p-field p-col">
                        <label for="data.device">设备</label>
                        <InputText id="data.device" v-model="data.device" type="text"/>
                    </div>
                    <div class="p-field p-col">
                        <label for="data.browser">浏览器</label>
                        <InputText id="data.browser" v-model="data.browser" type="text"/>
                    </div>
                </div>
                <div class="p-field">
                    <label for="data.user_agent">浏览器标识</label>
                    <Textarea v-model="data.user_agent" rows="5" cols="30" />
                </div>
                <div class="p-field">
                    <label for="data.user_id">用户身份id</label>
                    <InputText id="data.user_id" v-model="data.user_id" type="text"/>
                </div>
                <div class="p-field">
                    <label for="data.referer">来源</label>
                    <InputText id="data.referer" v-model="data.referer" type="text"/>
                </div>

            </div>
        </div>

        <div class="p-col-12 p-md-6">
            <div class="card p-fluid">
                <h5>响应信息</h5>

                <div class="p-formgrid p-grid">
                    <div class="p-field p-col">
                        <label for="data.execution_time">执行时长(秒)</label>
                        <InputText id="data.execution_time" v-model="data.execution_time" type="text"/>
                    </div>
                    <div class="p-field p-col">
                        <label for="data.code">回复状态码</label>
                        <InputText id="data.code" v-model="data.code" type="text"/>
                    </div>
                </div>
                <div class="p-field">
                    <label for="data.msg">回复描述</label>
                    <InputText id="data.msg" v-model="data.msg" type="text"/>
                </div>
                <div class="p-field">
                    <label for="data.data">响应数据集</label>
                    <Textarea v-model="data.data" rows="5" cols="30" />
                </div>
            </div>

            <div class="card">
                <h5>其他</h5>
                <div class="p-field p-fluid">
                    <label for="data.time_hour">请求时间</label>
                    <InputText v-model="data.time_hour" />
                </div>
                <div class="p-field p-fluid">
                    <label for="data.created_at">记录时间</label>
                    <InputText v-model="data.created_at" />
                </div>
                <Button label="返回" @click="back" class="p-button-secondary"/>
            </div>

        </div>

    </div>

</template>

<script>
    import TableService from '@/api/TableService';
    export default {
        data() {
            return {
                data: null,
                edit_title: '日志详情',
                home: {label: '控制台', icon: 'pi pi-home', to: '/'}, //面包屑公共导航
                crumbs: [ //面包屑
                ],
            }
        },
        TableService: null,
        created() {
            this.TableService = new TableService();
            //获取当前路由名称
            for (let i = 0; i < this.$router.options.routes[1].children.length; i++) {
                if (this.$router.options.routes[1].children[i].path === this.$route.path) {
                    this.crumbs = [
                        {label: '基础管理',},
                        {label: this.$router.options.routes[1].children[i].meta.title},
                    ];
                }
            }
        },
        mounted() {
            this.getInfo();
        },
        methods: {
            getInfo() {
                if (Object.keys(this.$route.query).length < 1) {
                    return;
                }
                this.TableService.get('/logs/edit', this.$route.query).then(data => {
                    if (data === undefined) {
                        return;
                    }
                    if (typeof (data) === 'object' && data.code !== 20000) {
                        return;
                    }
                    this.data = data.data;
                    this.edit_title = '正在查看：#' + data.data.id;
                });
            },
            back() {
                this.$router.go(-1);//返回上一层
            },
        }
    }
</script>

<style>
    .input-plupload {
        display: none;
    }
</style>